import { reactive } from 'vue'

const showSizePicker = true
const showQuickJumper = true
const page = 1
const pageSize = 10
const pageSizes = [10, 20, 50, 100]

export const usePagination = (callback: () => void) => {
  const pagination = reactive({
    showSizePicker,
    showQuickJumper,
    page,
    pageSize,
    pageSizes,
    onUpdatePage(page: number) {
      pagination.page = page
      callback()
    },
    onUpdatePageSize(size: number) {
      pagination.pageSize = size
      callback()
    }
  } as Pagination)
  return pagination
}

export const usePaginationTest = (callback: () => Promise<ApiResult<Page<object>>>) => {
  const pagination = reactive({
    showSizePicker: true,
    showQuickJumper: true,
    pageCount: 0,
    page: 1,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100],
    prefix({ itemCount }: { itemCount: number | undefined }) {
      return `共${itemCount ?? 0}条`
    },
    onUpdatePage(page: number) {
      pagination.page = page
      callback().then((res) => {
        console.log('aaaaassssssddddd')
        pagination.pageCount = res.data.pages
      })
    },
    onUpdatePageSize(size: number) {
      pagination.pageSize = size
      callback()
    }
  } as Pagination)

  return pagination
}
